<style>
  #mask{height: 100% !important;  background-color:#ccc;  opacity:0.5;  filter: alpha(opacity=50);  position:absolute;  left:0;  top:0;  z-index:1000;}
  #login{  position:fixed;  width: 650px;  height: 250px;  z-index:1001;  background: white;  border-radius: 15px;  }
</style>
<div style="min-height:400px;">
    <div class="weui-cells__title">
        论坛广告位列表
        <a href="javascript:;" id="addad" class="weui-btn weui-btn_mini weui-btn_primary">添加广告</a>
    </div>
  <div class="weui-cell weui-cell_access">
    <div class="weui-cell__bd"><small>编号</small></div>
    <div class="weui-cell__bd"><small>图片</small></div>
    <div class="weui-cell__bd"><small>尺寸</small></div>
    <div class="weui-cell__bd"><small>路径</small></div>
    <div class="weui-cell__bd"><small>上传时间</small></div>
    <div class="weui-cell__bd"><small>操作人员</small></div>
    <div class="weui-cell__bd"><small>操作</small></div>
  </div>
  <div class="weui-cells" id="ads">

  </div>
</div>

<sss>
  initPageData()
  function openNew() {
    //获取页面的高度和宽度
    var sWidth=document.body.scrollWidth;
    var sHeight=document.body.scrollHeight;
    //获取页面的可视区域高度和宽度
    var wHeight=document.documentElement.clientHeight;
    var oMask=document.createElement("div");
    oMask.id="mask";
    oMask.style.height=sHeight+"px";
    oMask.style.width=sWidth+"px";
    document.body.appendChild(oMask);
    var oLogin=document.createElement("div");
    oLogin.id="login";
    oLogin.innerHTML="<div class='loginCon'><div id='close' style='position: absolute; right: 0; top: 0;'><i class='weui-icon weui-icon-cancel weui-icon-original' style='font-size: 25px;'></i></div></div>";
    document.body.appendChild(oLogin);
    //获取登陆框的宽和高
    var dHeight=oLogin.offsetHeight;
    var dWidth=oLogin.offsetWidth;
    //设置登陆框的left和top
    oLogin.style.left=sWidth/2-dWidth/2+"px";
    oLogin.style.top=wHeight/2-dHeight/2+"px";
    //点击关闭按钮
    var oClose=document.getElementById("close");
    //点击登陆框以外的区域也可以关闭登陆框
    oClose.onclick=oMask.onclick=function(){
      document.body.removeChild(oLogin);
      document.body.removeChild(oMask);
    };
  }
  $('body').on('click', '#addad', function () {
    openNew()
    $('#login').html(`
      <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">跳转地址</label></div>
                        <div class="weui-cell__bd">
                            <input id="address" class="weui-input" type="url" placeholder="http://">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class='weui-cell__hd'>
                            <label class='weui-label'>上传广告图</label>
                        </div>
                        <img id="showImg" class="weui-uploader__file vehicle-create" src="" alt="" name="driving_card" type="img">
                        <div class="weui-uploader__input-box">
                            <input id="uploaderInputAd" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <a id="add-ad-btn" href="javascript:;" class="weui-btn weui-btn_primary " style="background-color: #1aad19;">提交</a>
                    </div>
    `);
    $('body').on('change','#uploaderInputAd' ,function () {
      var file = this.files[0];
      var size = file.size;
      var MIXSIZE = 50000000;
      if (size >= MIXSIZE) {
        return alert('上传文件太大')
      }
      var formDate = new FormData();
      formDate.append('0', $('#uploaderInputAd')[0].files[0]);
      $.ajax({
        url: 'http://api.hongyanche.com/upload/forum_ad',
        type: 'POST',
        cache: false,
        data: formDate,
        xhrFields:{
          withCredentials:true
        },
        processData: false,
        contentType: false,
        success: function (data) {
          $('#showImg').attr('src', data.data.url)
        },
        error: function (err) {
        }
      })
    });
    $('body').on('click', '#add-ad-btn', function () {
      var address = $('#address').val();
      var img = $('#showImg').attr('src')
      if (!address) return alert('请填写跳转地址');
//      alert(address.indexOf('http://'));
      if (address.indexOf('http://')) {
        return alert('必须输入http://')
      }
      $.ajax({
        url: 'http://api.hongyanche.com/forum_admin/forum_ad_add',
        type: 'POST',
        xhrFields:{
          withCredentials:true
        },
        data: {
          url: address,
          imgurl: img
        },
        success: function (data) {
          initPageData()
          alert(data.errormsg)
          $('#login').remove()
          $('#mask').remove()
        }
      })
    })
  });
function initPageData () {
  $.ajax({
    url: 'http://api.hongyanche.com/forum_admin/forum_ad_list',
    type: 'GET',
    xhrFields:{
              withCredentials:true
    },
    success: function (data) {
      if (data.state) {
        var datas = data.data.list;
        $('#ads').html(' ');
        datas.forEach(function (item, index) {
          let a = '';
          if (item.released == 1) {
            a = `
              <label class="weui-switch-cp">
                <input class="weui-switch sss" data-id="${item.id}" type="checkbox" checked="checked">
                  </label>
            `
          } else {
            a = `
              <label class="weui-switch-cp">
                <input class="weui-switch sss" data-id="${item.id}" type="checkbox">
                  </label>
            `
          }
          $('#ads').append(`
              <div class="weui-cell weui-cell_access">
                <div class="weui-cell__bd"><small>${item.id}</small></div>
                <div class="weui-cell__bd"><img class="i" style="width: 68px; height: 100px" src="${item.imgurl}" alt=""></div>
                <div class="weui-cell__bd"><small>285px * 319px</small></div>
                <div class="weui-cell__bd"><small class="lu">${item.url}</small></div>
                <div class="weui-cell__bd"><small>${item.create_time}</small></div>
                <div class="weui-cell__bd"><small>${item.user_name}</small></div>
                <div class="weui-cell__bd">
                  <a href="javascript:void(0)" data-id="${item.id}" class="xiugai weui-btn weui-btn_mini weui-btn_primary">修改</a>
                  ${a}
                  <a href="javascript:void(0)" data-id="${item.id}" class="removead weui-btn weui-btn_mini weui-btn_warn">删除</a>
                 </div>
              </div>
          `)
        })
      }
    }
  })
}
  $('body').on('click', '.xiugai', function () {
   let ID = $(this).attr('data-id');
   let lu = $(this).parent().parent().find('small.lu').text();
   let i = $(this).parent().parent().find('.i').attr('src')
   openNew();
    $('body').on('change','#uploaderInputAd' ,function () {
      var file = this.files[0];
      var size = file.size;
      var MIXSIZE = 50000000;
      if (size >= MIXSIZE) {
        return alert('上传文件太大')
      }
      var formDate = new FormData();
      formDate.append('0', $('#uploaderInputAd')[0].files[0]);
      $.ajax({
        url: 'http://api.hongyanche.com/upload/forum_ad',
        type: 'POST',
        cache: false,
        data: formDate,
        xhrFields:{
          withCredentials:true
        },
        processData: false,
        contentType: false,
        success: function (data) {
          $('#showImg').attr('src', data.data.url)
        },
        error: function (err) {
        }
      })
    })
   $('#login').css('height', '280px');
    $('#login').html(`
                      <div class="weui-cell">
                        <div class='weui-cell__hd'>
                            <label class='weui-label'>上传广告图</label>
                        </div>
                        <img id="showImg" class="weui-uploader__file vehicle-create" src="${i}" alt="" name="driving_card" type="img">
                        <div class="weui-uploader__input-box">
                            <input id="uploaderInputAd" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                        </div>
                    </div>
                <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">跳转地址</label></div>
                        <div class="weui-cell__bd">
                            <input id="address" class="weui-input" type="url" placeholder="http://" value="${lu}">
                        </div>
                    </div>

                    <div class="weui-cell">
                        <a id="xiugaiad" href="javascript:;" class="weui-btn weui-btn_primary " style="background-color: #1aad19;">修改</a>
                    </div>
    `);
    $('body').on('click', '#xiugaiad', function () {
      let url = $('#address').val()
      let img = $('#showImg').attr('src')
      $.ajax({
        url: 'http://api.hongyanche.com/forum_admin/forum_ad_modify',
        type: 'POST',
        xhrFields:{
          withCredentials:true
        },
        data: {
          id: ID,
          url: url,
          imgurl: img
        },
        success: function (data) {
          if (data.state) {
            $('#login').remove()
            $('#mask').remove()
            $('#ads').html(' ')
            initPageData()
          } else {
            alert('修改失败')
          }
        }
      })
    })
  });
  $('body').on('click', '.removead', function () {
    let ID = $(this).attr('data-id')
    $.ajax({
      url: 'http://api.hongyanche.com/forum_admin/forum_ad_remove',
      type: 'POST',
      xhrFields:{
      withCredentials:true
    },
      data: {
        id: ID
      },
      success: function (data) {
        initPageData()
      }
    })
  })
  $('body').on('change', '.sss', function () {
    var ID = $(this).attr('data-id');
    var bischecked=$($(this)).is(':checked');
    if (bischecked) {
      $.ajax({
        url: 'http://api.hongyanche.com/forum_admin/forum_ad_release',
        type: 'POST',
        xhrFields:{
          withCredentials:true
        },
        data: {
          id: ID,
          release: 1
        },
        success: function () {
          $('#ads').html(' ')
          initPageData()
        }
      })
    } else {
      $.ajax({
        url: 'http://api.hongyanche.com/forum_admin/forum_ad_release',
        type: 'POST',
        xhrFields:{
          withCredentials:true
        },
        data: {
          id: ID,
          release: 0
        },
        success: function () {
          $('#ads').html(' ')
          initPageData()
        }
      })
    }
  })
</sss>
